<template>
  <div class="listbody">
    <!-- <el-form
      ref="hform"
      :model="hform"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="状态：">
        <el-radio-group v-model="hform.status" @change="changeHfomStatus">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form> -->
    <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
      <div class="flex mb_15">
        <el-button plain type="primary" size="mini" @click="handleAdd">任务新增</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      ref="tablelayout"
      class="commtable"
    >
      <!-- @selection-change="handleSelectionChange" -->
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" label="ID" prop="id"></el-table-column>
      <el-table-column
        align="center"
        label="分类"
        prop="class_name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="任务"
        prop="name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="赠送积分"
        prop="score"
      ></el-table-column>
      <el-table-column label="是否可用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#eee"
            :inactive-value="0"
            :active-value="1"
            @change="changeStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="排序"
        prop="level"
      ></el-table-column>
      <el-table-column
        prop="created_at"
        label="操作"
        width="150"
        fixed="right"
        align="center"
      >
        <template slot-scope="scope">
          <div class="flex btnflex">
            <div
              class="commhover btn_green c_fff mr_10"
              @click="handleUpdate(scope.row)"
            >
              <i class="el-icon-edit f-14"></i> 编辑
            </div>
            <div
              class="commhover btn_yellow c_fff"
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete f-14"></i> 删除
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />

    <div class="flexend mt_30">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="580px"
      class="dialogheaderbg"
      :before-close="handleCloseAdd"
      :close-on-click-modal='false'
      append-to-body
    >
      <el-form ref="form" v-if="open" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="分类名称：" prop="class_id">
          <el-select
            v-model="form.class_id"
            style="width: 100%"
            placeholder="请选择会员ID"
          >
            <el-option
              v-for="(item, index) in classType"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="赠送积分：" prop="score">
          <el-input-number
            v-model="form.score"
            :min="1"
            :max="10000"
            label="积分"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="排序：" prop="level">
          <el-input-number
            v-model="form.level"
            :min="1"
            :max="10000"
            label="排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="任务有效期：" prop="type">
          <el-select
            v-model="form.type"
            style="width: 100%"
            placeholder="请选择任务有效期"
          >
            <el-option
              v-for="(item, index) in taskType"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="msg">
          <el-input v-model="form.msg" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="是否显示：" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  sginTaskIndex,
  getSginTaskType,
  getSginTaskClass,
  sginTaskDel,
  sginTaskEdit,
  sginTaskAdd,
  sginTaskOpen,
  sginTaskClose,
} from "@/api/sethome";
import TaskComp from "./TaskComp.vue";
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      total: 0,
      loading: false,
      tableData: [],
      hform: {
        status: 1,
      },
      title: "",
      open: false,
      form: {
        id: undefined,
        class_id:'',
        type:'',
        msg:'',
        name: "",
        score: "",
        level: "",
        status: 1,
      },
      rules: {
        class_id: [{ required: true, message: "请选择分类", trigger: "blur" }],
        name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
        score: [{ required: true, message: "赠送积分不能为空", trigger: "blur" }],
        level: [{ required: true, message: "排序值不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }],
      },
      taskopen: false,
      classType: {},
      taskType:[]
    };
  },

  created() {
    this.getSginTaskClass();
    this.getSginTaskType();
    this.getList();
  },

  components: {
    TaskComp,
  },

  methods: {
    getList() {
      this.loading = true;
      let params = {
        page: this.queryParams.page,
        num: this.queryParams.num,
      };
      sginTaskIndex(params).then((response) => {
        this.tableData = response.data.list.map(item=>{
            for (const key in this.classType) {
                if(item.class_id == key){
                    item.class_name = this.classType[key]
                }
            }
            return item
        });
        console.log('this.tableData:',this.tableData)
        this.total = response.data.count;
        this.loading = false;
        this.hform.status = response.data.status;
      });
    },

    getSginTaskClass() {
      getSginTaskClass().then((res) => {
        this.classType = res.data;
      });
    },

    getSginTaskType() {
      getSginTaskType().then((res) => {
        this.taskType = res.data;
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    onSubmit() {
      this.$emit("close");
    },

    close() {
      this.$emit("close");
    },

    handleAdd() {
      this.title = "添加";
      this.reset();
      this.open = true;
    },
    reset() {
      this.form = {
        class_id:'',
        type:'',
        msg:'',
        name: "",
        score: "",
        level: "",
        status: 1,
        id: undefined,
      };
      this.resetForm("form");
    },

    handleCloseAdd() {
      this.open = false;
    },

    handleUpdate(row) {
      this.title = "编辑";
    //   this.reset();
      this.form.class_id = row.class_id+"";
      this.form.type = row.type;
      this.form.name = row.name;
      this.form.level = row.level;
      this.form.score = row.score;
      this.form.status = row.status;
      this.form.msg = row.msg
      this.form.id = row.id;
      console.log('form:', this.form)
      this.open = true;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        if (this.form.id) {
          sginTaskEdit(this.form).then((res) => {
            this.$modal.msgSuccess("编辑成功");
            this.handleCloseAdd();
            this.getList();
          });
        } else {
          sginTaskAdd(this.form).then((res) => {
            this.$modal.msgSuccess("添加成功");
            this.handleCloseAdd();
            this.getList();
          });
        }
      });
    },

    changeStatus(val, row) {
      if (val) {
        this.$modal
          .confirm("是否显示该数据项")
          .then(function () {
            return sginTaskOpen({
              id: row.id,
            });
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("开启成功");
          })
          .catch(() => {
            row.status = val ? 0 : 1;
          });
      } else {
        this.$modal
          .confirm("是否隐藏该数据项")
          .then(function () {
            return sginTaskClose({
              id: row.id,
            });
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("关闭成功");
          })
          .catch(() => {
            row.status = val ? 0 : 1;
          });
      }
    },

    // changeHfomStatus(val) {
    //   console.log("vaL:", val);
    //   if (val) {
    //     this.$modal
    //       .confirm("是否开启签到")
    //       .then(function () {
    //         return sginStatusOpen();
    //       })
    //       .then(() => {
    //         this.getList();
    //         this.$modal.msgSuccess("开启成功");
    //       })
    //       .catch(() => {
    //         this.hform.status = val ? 0 : 1;
    //       });
    //   } else {
    //     this.$modal
    //       .confirm("是否关闭签到")
    //       .then(function () {
    //         return sginStatusClose();
    //       })
    //       .then(() => {
    //         this.getList();
    //         this.$modal.msgSuccess("关闭成功");
    //       })
    //       .catch(() => {
    //         this.hform.status = val ? 0 : 1;
    //       });
    //   }
    // },

    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.id;
      this.$modal
        .confirm('是否确认删除编号为"' + infoIds + '"的数据项？')
        .then(() => {
          return sginTaskDel({ id: infoIds });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    handleTask() {
      this.taskopen = true;
    },
  },
};
</script>